<template>
  <div style="height: 100%;background-color:white">
    <el-row style="margin-bottom: 10px">
      <el-col :span="14">
        <div style="display: inline-block;margin-left: 5px">
          <el-upload ref="upload"
                     :multiple="true"
                     :on-progress="uploadProgress"
                     :on-success="onSuccess"
                     :show-file-list="false"
                     accept=".zip"
                     action="/pmph/action/examBook/importExamBooks"
                     auto-upload class="upload-demo">
            <el-button size="small" type="primary">导入书籍</el-button>
          </el-upload>
        </div>
        <el-button plain size="small" type="success" @click="batchDel">批量删除</el-button>
      </el-col>
      <el-col :span="10" style="right: auto">
        <div>
          <div style="width: 430px; float: right">
            <el-input v-model="guideBook.name" placeholder="请输入指导书名" size="small" @keyup.enter.native="getTableData">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <el-button slot="append" :icon="appendIcon" @click="switchAppend"></el-button>
            </el-input>
          </div>
          <div v-if="showAdvance" id="advance" style="padding: 10px; float: right">
            <div>
              <div>
                <div style="width: 100px;text-align:right; display: inline-block">
                  <span>适用专业</span>
                </div>
                <div style="display: inline-block">
                  <el-input v-model="guideBook.adaptMajors" placeholder="请输入适用专业" size="small"
                            style="width: 300px;margin-top: 10px"></el-input>
                </div>
              </div>
              <div>
                <div style="width: 100px;text-align:right; display: inline-block">
                  <span>ISBN</span>
                </div>
                <div style="display: inline-block">
                  <el-input v-model="guideBook.isbn" placeholder="请输入ISBN" size="small"
                            style="width: 300px;margin-top: 10px"></el-input>
                </div>
              </div>
              <div>
                <div style="width: 100px;text-align:right; display: inline-block">
                  <span>选择知识数</span>
                </div>
                <div style="display: inline-block;margin-top: 10px">
                  <el-input-number v-model="guideBook.startNum"
                                   :min="guideBook.startNum"
                                   controls-position="right"
                                   size="small"
                                   style="width: 136px"/>
                  <span>至</span>
                  <el-input-number v-model="guideBook.endNum"
                                   :min="guideBook.startNum"
                                   controls-position="right"
                                   size="small"
                                   style="width: 136px"/>
                </div>
              </div>
              <div>
                <div style="width: 100px;text-align:right; display: inline-block">
                  <span>选择时间</span>
                </div>
                <div style="display: inline-block;margin-top: 10px">
                  <el-date-picker
                    v-model="guideBook.importTime"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    size="small"
                    start-placeholder="开始日期"
                    style="width: 300px;"
                    type="daterange"
                    value-format=" yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </div>
              </div>
            </div>
            <div style="margin-top: 60px; right: 10px;">
              <el-row>
                <el-col :offset="7" :span="9">
                  <div style="margin-left: 90px;height: 32px; width: 88px;">
                    <el-button size="small" v-on:click="advanceCancel">取 消</el-button>
                  </div>
                </el-col>
                <el-col :offset="0.8" :span="2">
                  <div div style="margin-left: 5px;height: 32px; width: 88px;">
                    <el-button size="small" type="success" v-on:click="replacement">重 置</el-button>
                  </div>
                </el-col>
                <el-col :offset="2" :span="2">
                  <div div style="margin-left: 5px;height: 32px; width: 88px;">
                    <el-button size="small" type="success" v-on:click="advanceConfirm">确 定</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="tableData" :height="tableHeight" border highlight-current-row stripe style="width: 100%;"
                @selection-change="handleSelectionChange">
        <el-table-column
          v-model="multipleSelection"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label="指导书名" min-width="200" prop="name">
        </el-table-column>
        <el-table-column label="适应专业" min-width="150" prop="adaptMajors"></el-table-column>
        <el-table-column label="专业代码" min-width="100" prop="majorsCode"></el-table-column>
        <el-table-column label="ISBN" min-width="150" prop="isbn"></el-table-column>
        <el-table-column label="知识数量" min-width="80" prop="num"></el-table-column>
        <el-table-column :show-overflow-tooltip="false" label="状态" min-width="100" prop="status">
          <template slot-scope="scope">
            <span v-if="scope.row.status===0" style="color: #FF8C00">导入中</span>
            <span v-if="scope.row.status===2" style="color: #2DB7A0">导入成功</span>
            <span v-if="scope.row.status===1" style="color: #EC0000">导入失败
		<el-popover
      :content="scope.row.failureReason"
      trigger="hover"
    >
       <el-button slot="reference" style="margin-left: 10px" type="text"><a style="color: #EC0000">详情</a><i
         class="el-icon-warning-outline el-icon--right" style="color: #EC0000"></i></el-button>
  </el-popover> </span>
          </template>
        </el-table-column>
        <el-table-column label="导入者" min-width="100" prop="createdBy"></el-table-column>
        <el-table-column label="导入时间" min-width="150" prop="createdTime"></el-table-column>
        <el-table-column :show-overflow-tooltip="false" label="操作" min-width="200">
          <template slot-scope="scope">
            <span><el-link type="primary" @click.prevent="edit(scope.row)">编辑</el-link></span>
            <span><el-link type="primary" @click.prevent="detail(scope.row.id)">图书详情</el-link></span>
            <span><el-link type="primary"
                           @click.prevent="showKnowledge(scope.row.id,scope.row.examOutlineId)">查看知识</el-link></span>
            <span><el-link type="danger" @click.prevent="del(scope.row.id)">删除</el-link></span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <div style="margin-top: 10px">
        <el-pagination
          v-if="multiplePages"
          :page-size="guideBook.pageSize"
          :page-sizes="[5, 10, 15, 20, 50, 100]"
          :total="totalNum"
          background
          layout="total, sizes, prev, pager, next, jumper"
          style="text-align: right;"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"></el-pagination>
      </div>
    </el-row>
    <el-dialog :visible.sync="editDialogVisible" title="编辑书籍" width="500px" @click="editCloseDialog">
      <el-row>
        <el-col :span="6">
          <span class="label">指导书名<em style="color: red">*</em></span>
        </el-col>
        <el-col :span="18">
          <el-input v-model="examBook.name" placeholder="请输入指导书名"/>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="6">
          <span class="label">适应专业 <em style="color: red">*</em></span>
        </el-col>
        <el-col :span="18">
          <el-input v-model="examBook.adaptMajors" placeholder="请输入适应专业"></el-input>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="6">
          <span class="label">专业代码</span>
        </el-col>
        <el-col :span="18">
          <el-input v-model="examBook.majorsCode" placeholder="请输入专业代码"></el-input>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="6">
          <span class="label">ISBN</span>
        </el-col>
        <el-col :span="18">
          <el-input v-model="examBook.isbn" placeholder="请输入ISBN"></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editCloseDialog">取 消</el-button>
        <el-button type="primary" @click="editConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "GuideBookTable",
  data() {
    return {
      appendIcon: "el-icon-caret-bottom",

      tableData: [],
      showAdvance: false,
      totalNum: 0,
      multipleSelection: [],
      multiplePages: true,
      uploadVisible: false,
      editDialogVisible: false,
      examBook: {},
      guideBook: {
        startNum: 0,
        endNum: 0,
        currentPage: 1, // 第几页
        pageSize: 10, // 每页显示的数据个数
      },
    }
  },
  methods: {
    handleCurrentChange: function (val) {
      this.guideBook.currentPage = val;
      this.getTableData();
    },
    handleSizeChange(value) {
      this.guideBook.pageSize = value;
      this.getTableData()
    },
    advanceCancel() {
      this.showAdvance = false;
    },
    replacement: function () {
      this.guideBook = {
        startNum: 0,
        endNum: 0,
        currentPage: 1,
        pageSize: 10
      }

    },
    advanceConfirm() {
      this.getTableData();
      this.showAdvance = false;
    },
    switchAppend: function () {
      if (this.showAdvance) {
        this.showAdvance = false;
        this.appendIcon = "el-icon-caret-bottom";
      } else {
        this.showAdvance = true;
        this.appendIcon = "el-icon-caret-top";
      }
    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
    },
    detail(id) {
      this.$router.push({
          path: '/bookDetail',
          query: {id: id}
        }
      )
    },
    edit(row) {
      this.editDialogVisible = true
      this.examBook = JSON.parse(JSON.stringify(row))
    },
    showKnowledge(id, examOutlineId) {
      this.$router.push({
        path: '/showKnowledgeTable',
        query: {
          examBookId: id,
          examOutlineId: examOutlineId
        }
      })
    },
    del: function (ids) {
      this.$confirm('是否删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let param = new URLSearchParams();
        param.append("ids", ids)
        this.axios.post('/pmph/action/examBook/deleteExamBookById', param).then((response) => {
          this.getTableData()
        })
      })
    },
    batchDel() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning("请至少选择一条")
        return;
      }
      let ids = this.multipleSelection.map(item => item.id).join(",");
      this.del(ids)
    },
    closedDialog() {
      this.uploadVisible = false
    },
    editCloseDialog() {
      this.editDialogVisible = false
    },
    uploadProgress() {
      this.uploadVisible = false
    },
    editConfirm() {
      let param = new URLSearchParams();
      param.append("examBook", JSON.stringify(this.examBook))
      this.axios.post('/pmph/action/examBook/saveExamBook', param).then((response) => {
        this.editDialogVisible = false
      })
    },
    onSuccess: function (response) {
      this.$message({message: response, type: 'success', customClass: 'zZindex'});
      this.getTableData()
      this.uploadVisible = false;
    },
    getTableData: function () {
      this.axios.get('/pmph/action/examBook/selectGuideBookList', {
        params: this.guideBook,

      }).then((response) => {
        this.tableData = response.data.records;
        this.totalNum = response.data.total;
        if (this.tableData.find(item => item.status === 0)) {
          this.timer = setTimeout(this.getTableData, 3000);
        }
      })
    }
  }
  ,
  created() {
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 140;
    this.getTableData()
  }
}
</script>

<style scoped>

</style>
